<template>
	<view class="visitors">
		<view class="visitors-content">
			<view class="names">
				房屋
			</view>
			<view class="inputs" @click="serverStore.flagshow = true;showAlert = 0">
				请选择您要授权的房屋地址
			</view>
			<view class="icons">
				<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;">
				</image>
			</view>
		</view>
		<view class="visitors-content">
			<view class="names">
				访客姓名
			</view>
			<view class="inputs">
				<input type="text" placeholder="请输入真实姓名" />
			</view>
			<view class="icons">

			</view>
		</view>
		<view class="visitors-content">
			<view class="names">
				住户性别
			</view>
			<view class="inputs" style="width: 300rpx;">
				<radio-group name="">
					<label style="margin-right: 50rpx;">
						<radio :value="1" /><text>男</text>
					</label>
					<label>
						<radio :value="2" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="icons">

			</view>
		</view>
		<view class="visitors-content">
			<view class="names">
				手机号码
			</view>
			<view class="inputs">
				<input type="text" placeholder="请输入手机号码" />
			</view>
			<view class="icons">

			</view>
		</view>
		<view class="visitors-content">
			<view class="names">
				访问日期
			</view>
			<view class="inputs" @click="serverStore.flagshow = true;showAlert = 1">
				请选择访问日期
			</view>
			<view class="icons">
				<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;">
				</image>
			</view>
		</view>
		<view class="visitors-content">
			<view class="names">
				访问时长
			</view>
			<view class="inputs" @click="serverStore.flagshow = true;showAlert = 2">
				请选择访问时长
			</view>
			<view class="icons">
				<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;">
				</image>
			</view>
		</view>
		<MaskAlertVue :flagshow="flagshow" class="Maskalert">
			<view v-if="showAlert==0" class="fangwu">
				<view class="title">
					选择访问房屋
					<view class="offalert" @click="serverStore.flagshow = false">
						×
					</view>
				</view>
				<view class="items" @click="serverStore.flagshow = false">
					南航碧桂园小区11栋2单元401
				</view>
				<view class="items" @click="serverStore.flagshow = false">
					南航碧桂园小区11栋2单元401
				</view>
				<view class="items" @click="serverStore.flagshow = false">
					南航碧桂园小区11栋2单元401
				</view>
			</view>
			<view class="Time" v-else-if="showAlert==1">
				<view class="title">
					<view class="offalert" @click="serverStore.flagshow = false">
						取消
					</view>
					<view class="enteralert" @click="serverStore.flagshow = false">
						确定
					</view>
				</view>
				<view class="content">
					<view class="item">
						<text>2020</text>
						<text>01</text>
						<text>01</text>
					</view>
					<view class="item">
						<text>2021</text>
						<text>01</text>
						<text>01</text>
					</view>
					<view class="item">
						<text>2022</text>
						<text>01</text>
						<text>01</text>
					</view>
				</view>

			</view>
			<view class="Times" v-else>
				<view class="title">
					选择访问时长
					<view class="offalert" @click="serverStore.flagshow = false">
						×
					</view>
				</view>
				<view class="content">
					<view class="item" v-for="item in longTime" :key="item" @click="serverStore.flagshow = false">
						{{item}}
					</view>
				</view>
			</view>
		</MaskAlertVue>
		<button class="Btns" @click="goTongxing">生成通行证</button>
	</view>
</template>

<script setup>
	import MaskAlertVue from '../../../../components/MaskAlert.vue';
	import {
		ref
	} from 'vue'
	import {
		useServerStore
	} from '../../../../stores/serverStore';
	const serverStore = useServerStore()
	let showAlert = ref(0)
	let longTime = ref(['1天', '12小时', '6小时', '3小时', '2小时', '1小时', '0.5小时'])
	const goTongxing = () => {
		uni.showToast({
			title: '生成中',
			icon: 'loading'
		})
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/server/views/CardPass/CardPass'
			})
			uni.showToast({
				title: '生成成功',
			})
		}, 1000)
	}
</script>

<style lang="scss">
	.Maskalert {


		.Times {
			padding-bottom: 50rpx;

			.title {
				text-align: center;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				position: relative;

				.offalert {
					position: absolute;
					right: 15rpx;
					top: 0;
					color: #aaaaaa;
					font-size: 40rpx;
				}
			}

			.item {
				text-align: center;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 30rpx 0rpx;
				font-size: 28rpx;
			}
		}

		.Time {
			.content {
				padding-bottom: 50rpx;

				.item:nth-child(1) {
					border-bottom: 2rpx solid #f8f9fb;
				}

				.item:nth-child(2) {
					opacity: 0.5;
				}

				.item:nth-child(3) {
					opacity: 0.3;
				}

				.item {
					display: flex;
					justify-content: space-around;
					padding: 30rpx 0rpx;
				}
			}

			.title {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #f2f2f2;

				.offalert {}

				.enteralert {}
			}
		}

		.fangwu {
			padding-bottom: 50rpx;

			.title {
				text-align: center;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				position: relative;

				.offalert {
					position: absolute;
					right: 15rpx;
					top: 0;
					color: #aaaaaa;
					font-size: 40rpx;
				}
			}

			.items {
				text-align: center;
				border-top: 2rpx solid #f2f2f2;
				padding: 30rpx 0rpx;
				font-size: 28rpx;
				cursor: pointer;
			}
		}

	}

	.visitors {
		.Btns {
			background-color: #006eff;
			font-size: 35rpx;
			color: white;
			margin-top: 50rpx;
		}

		height: calc(100vh - 60rpx);
		padding: 30rpx;
		background-color: #fdfeff;

		.visitors-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f2f2f2;
			margin-bottom: 30rpx;

			.names {
				width: 128rpx;
			}

			.inputs {
				width: 332rpx;
				font-size: 26rpx;
				color: #808080;
			}

			.icons {
				width: 40rpx;
			}

		}
	}
</style>